<template>
  <div class="app-container">
    <div class="search">
      <el-form>
        <el-row type="flex" align="center" style="height: 36px">
          <el-row style="margin-right: 10px">
            <el-form-item label="区域搜索：" label-width="96px" width="206px">
              <el-input
                v-model.trim="requestParams.name"
                placeholder="输入关键词搜索"
                clearable
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="handlerSearch"
            >
              查询
            </el-button>
          </el-row>
        </el-row>
      </el-form>
    </div>
    <div class="table">
      <el-row class="top">
        <el-button
          class="addBtn el-icon-circle-plus-outline"
          @click="openDialog('add')"
        >
          新建
        </el-button>
      </el-row>
      <table-component
        :table-cols="tableCols"
        :table-data="tableData"
        :is-loading="isLoading"
      >
        <template #otherTableCol>
          <el-table-column label="操作" class="operator" width="300px">
            <template #default="{ row }">
              <el-button
                type="text"
                size="mini"
                class="btn"
                @click="detail(row)"
              >
                查询详情
              </el-button>
              <el-button
                type="text"
                size="mini"
                class="btn"
                @click="openDialog('edit', row)"
              >
                修改
              </el-button>
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                title="确定删除吗"
                class="del_pop"
                @onConfirm="del(row.id)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  size="mini"
                  class="del_btn"
                >
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </template>
      </table-component>
    </div>
    <quyu-form-dialog ref="form_dialog" @getList="getList" />
    <quyu-detail-dialog ref="detail_dialog" />
    <Pager :total-info="totalInfo" @handlerPageChange="handlerPageChange" />
  </div>
</template>

<script>
import { getRegionListApi, delRegionApi } from '@/api/pointManage/region'
import TableComponent from '@/views/point/components/TableComponent'
import QuyuFormDialog from '@/views/point/components/QuyuFormDialog'
import QuyuDetailDialog from '@/views/point/components/QuyuDetailDialog'
import Pager from '@/views/point/components/pager'
export default {
  name: 'Hezuo',
  components: {
    TableComponent,
    QuyuFormDialog,
    QuyuDetailDialog,
    Pager
  },
  data () {
    return {
      tableCols: [
        { label: '序号', width: '100px', type: 'index', index: true },
        { label: '区域名称', prop: 'name' },
        { label: '点位数', prop: 'nodeCount' },
        { label: '备注说明', width: '282px', prop: 'remark' }
      ],
      requestParams: {
        pageIndex: 1,
        pageSize: 10,
        name: null
      },
      tableData: [],
      dialogTitle: '',
      isLoading: false,
      totalInfo: {
        total: 0,
        totalPage: 0,
        pageIndex: 0
      }
    }
  },
  watch: {
    'requestParams.name': {
      handler (val) {
        if (val === '') {
          this.getList()
        }
      }
    }
  },
  created () {
    this.getList()
  },

  methods: {
    async getList () {
      this.isLoading = true
      const res = await getRegionListApi(this.requestParams)
      this.tableData = res.currentPageRecords
      this.totalInfo.total = +res.totalCount
      this.totalInfo.totalPage = +res.totalPage
      this.totalInfo.pageIndex = +res.pageIndex
      this.isLoading = false
    },
    openDialog (type, row) {
      this.$refs.form_dialog.handlerOpen(type, row)
    },
    async del (id) {
      if (this.tableData.length === 1) {
        this.requestParams.pageIndex = this.requestParams.pageIndex - 1
      }
      await delRegionApi(id)
      this.$message.success('删除成功')
      this.getList()
    },
    handlerSearch () {
      this.getList()
    },
    detail (row) {
      this.$refs.detail_dialog.openDialog(row)
    },
    handlerPageChange (val) {
      this.requestParams.pageIndex = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  height: 64px;
  align-items: center;
  padding-left: 17px;
  margin-bottom: 20px;
  background-color: #fff;
  ::v-deep .el-input__inner {
    height: 36px;
  }
  ::v-deep .el-button--primary {
    display: flex;
    height: 36px;
    justify-content: center;
    align-items: center;
    i {
      font-size: 16px;
    }
    background-color: #5f84ff;
    border: none;
    &:focus,
    &:hover {
      background-color: #5373e0;
    }
  }
}

.el-form-item {
  height: 36px;
  label.el-form-item__label {
    padding-right: 12px;
  }
  ::v-deep label {
    font-weight: 500;
  }
  ::v-deep .el-form-item__content {
    width: 206px;
  }
}

.addBtn {
  width: 80px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  border: 0;
  &:focus,
  &:hover {
    background: linear-gradient(135deg, #ff7d43, #db3602) !important;
  }
  color: #fff;
  ::v-deep span {
    margin-left: 4px;
  }
}

.btn {
  font-size: 14px;
  color: #5f84ff;
}
.del_btn {
  font-size: 14px;
  color: #ff5a5a;
}

.table {
  padding: 20px 15px 19px 17px;
  background-color: #fff;
  .top {
    margin-bottom: 20px;
  }
}

::v-deep .el-table {
  td {
    padding: 6px 0;
    border: none;
  }
  &::before {
    height: 0;
  }
}
::v-deep .el-message-box {
  ::v-deep .el-button--primary {
    color: #fff;
    background-color: #5f84ff;
    border-color: #5f84ff;
  }
}
.del_pop {
  margin-left: 10px;
}
</style>
